<template>
  <div class="lg:gap-5 flex flex-col gap-3">
    <div class="flex justify-between items-center">
      <h2 class="font-bold lg:text-[20px] text-[#09090B] text-[1rem] capitalize">
        {{ $t('pages.news') }}
      </h2>
      <nuxt-link
        :prefetch="false"
        :to="localePath('/news')"
        class="py-2 px-4 bg-[#f7f7f7] rounded-full border flex justify-center items-center cursor-pointer"
      >
        <span class="font-bold text-[12px] text-[#121212] capitalize">
          {{ $t('pages.viewAll') }}
        </span>
      </nuxt-link>
    </div>
    <div class="lg:grid-cols-4 max-lg:overflow-x-auto max-lg:flex max-lg:flex-nowrap lg:gap-6 lg:grid gap-3">
      <nuxt-link
        :prefetch="false"
        class="max-lg:w-3/4 max-lg:flex-none group flex flex-col gap-3 cursor-pointer"
        v-for="(i, k) in news"
        :key="k"
        target="_blank"
        :to="`/news/${i.code}`"
      >
        <div class="rounded-[16px] aspect-auto h-[163px] overflow-hidden border">
          <img
            :src="$globalFn.imgPrefixUrl(i.cover, 'article')"
            :alt="i.seo_title"
            :title="i.seo_title"
            class="group-hover:scale-110 size-full object-cover transition-all duration-300"
          />
        </div>
        <h3 class="font-bold text-[14px] text-[#262626] line-clamp-1">
          {{ i.title }}
        </h3>
        <!-- <div class="font-medium text-[12px] text-black/50 line-clamp-1">
          {{ i.description }}
        </div> -->
        <div class="flex justify-between items-center">
          <span class="font-medium text-[12px] text-[#A1A1AA]">{{ i.publish_time_text }}</span>
          <!-- <span class="font-medium text-[12px] text-[#262626] capitalize">
            {{ $t('pages.more') }}
          </span> -->
        </div>
      </nuxt-link>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'NewsList',
    props: {
      news: {
        type: Array,
        default: () => []
      }
    }
  }
</script>
